<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--导航-->
<nav th:fragment="mynav" id="nav" class="gird-header" style="display: none">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui olive header item" style="font-family: STSong"></h2>
            <!--<div class="right m-item item m-mobile-hide">-->
            <a href="#" th:href="@{/}" class="active m-item item"><i class="home icon"></i>首页</a>
            <a href="#" th:href="@{/types/-1}" class="m-item item"><i class="clone outline icon"></i>分类</a>
            <a href="#" th:href="@{/archives}" class="m-item item"><i class="clock icon"></i>时间轴</a>
            <!--  <a href="#" th:href="@{/music}" class="m-item item"><i class="music icon"></i>音乐盒</a>-->
            <a href="#" th:href="@{/message}" class="m-item item"><i class="book icon"></i>留言板</a>
            <!--<a href="#" th:href="@{/friends}" class="m-item item"><i class="pencil alternate icon"></i>友人帐</a>-->
            <a href="#" th:href="@{/picture}" class="olive m-item item"><i class="image icon"></i>照片墙</a>
            <!--<a id="con-last" href="#" th:href="@{/about}" class="m-item item" ><i class="info icon"></i>关于我</a>-->
            <!--</div>-->
            <div class="right m-item item">
                <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
                        <input style="color: white" type="text" name="query" placeholder="Search...."
                               th:value="${query}">
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-hide" style="display: none">
        <i class="sidebar icon"></i>
    </a>
</nav>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"
        th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<script th:inline="javascript">
    var user=[[${session.user}]]
</script>
<script>
    // 导航栏显示
    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function (direction) {
            if (direction == 'down') {
                $('#nav').show(500);
            } else {
                $('#nav').hide(500);
            }
            console.log('Scrolled to waypoint!  ' + direction);
        }
    })
    /**
     * 显示用户信息控制器
     */
    function User() {
        if ( user == null){
            $("#con-last").after("<a href=\"/admin/loginPage\" class=\"active m-item item\">登录</a>")
        }else {
            $("#con-last").after("<a href=\"#\" th:href=\"@{/}\" class=\"active m-item item\"><i class=\"home icon\"></i>"+user.nickname+"</a>")
        }
    }
</script>
</html>